Random Image Generator using JavaScript |
您所在的位置：网站首页 › random web page generator › Random Image Generator using JavaScript |
Random Image Generator using JavaScript
|
In this article, we will learn how to generate random images in fixed intervals using only HTML, CSS, and JavaScript. Approach: The pictures which are going to be generated randomly on the website should be stored in the form of an array, these pictures are then displayed to the user within a regular time interval. We use the setInterval() function which is an in-built function of JavaScript to set a timer between the images to display and we will use the floor(Math.random()*pics.length) method to generate a random number between 0 and the length of the array that is assigned to the images to display randomly. Below is the step-by-step implementation of the above approach. Step 1: In your HTML page, create an empty section that will contain the randomly generated pictures. index.html * { margin: 0%; padding: 0%; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { background: rgba(120, 16, 180, 0.767); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .container { margin: 1.5vh 20vw; margin-top: 10vh; text-align: center; background: rgb(39, 188, 209); background: linear-gradient(118deg, rgba(39, 188, 209, 0.9783263647255778) 0%, rgba(6, 14, 101, 1) 100%); opacity: 0.9; color: white; padding: 10px 10vw; border-radius: 20px; min-height: 15vh; } h1 { text-transform: uppercase; } section { height: 50vh; width: 100%; margin-top: -50px; background-position: center; background-repeat: no-repeat; } Geeks For Geeks Courses With the idea of imparting programming knowledge, Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream, GeeksforGeeks. Whether programming excites you or you feel stifled, wondering how to prepare for interview questions or how to ace data structures and algorithms, GeeksforGeeks is a one-stop solution.Output:  Initial Web Page with the empty section. Step 2: In JavaScript, create an array of image links. The images inside the array are to be generated randomly on the webpage. We will call the indexes of this array randomly using Math.random function to be displayed. Create a JavaScript variable to store a random value calculated by using the Math library i.e. Math.floor(Math.random()*pics.length). It is going to generate a random number between 0 and the length of the pics array, this would be assigned to the images inside the pics array to display them randomly. setInterval() is an in-built function of JavaScript which is used to set a timer between the images to display. It has 2 parameters, the function that needs to be executed, and the time interval between each generation. Now combine all the JS codes in your HTML code. index.html Image Generator * { margin: 0%; padding: 0%; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } body { background: rgba(120, 16, 180, 0.767); height: 100%; background-position: center; background-repeat: no-repeat; background-size: cover; } .container { margin: 1.5vh 20vw; margin-top: 10vh; text-align: center; background: rgb(39, 188, 209); background: linear-gradient(118deg, rgba(39, 188, 209, 0.9783263647255778) 0%, rgba(6, 14, 101, 1) 100%); opacity: 0.9; color: white; padding: 10px 10vw; border-radius: 20px; min-height: 15vh; } h1 { text-transform: uppercase; } section { height: 50vh; width: 100%; margin-top: -50px; background-position: center; background-repeat: no-repeat; } Geeks For Geeks Courses With the idea of imparting programming knowledge, Mr. Sandeep Jain, an IIT Roorkee alumnus started a dream, GeeksforGeeks. Whether programming excites you or you feel stifled, wondering how to prepare for interview questions or how to ace data structures and algorithms, GeeksforGeeks is a one-stop solution. const pics = [ 'url("https://media.geeksforgeeks.org/wp-content/uploads/20200316135008/red7.png")', 'url("https://media.geeksforgeeks.org/wp-content/uploads/20200316135014/yellow3.png")', 'url("https://media.geeksforgeeks.org/img-practice/[email protected]")', 'url("https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-course-overview-image.png")', 'url("https://media.geeksforgeeks.org/img-practice/banner/complete-interview-preparation-thumbnail.png")', 'url("https://media.geeksforgeeks.org/img-practice/banner/Amazon-Test-Series-thumbnail.png")', 'url("https://media.geeksforgeeks.org/img-practice/banner/dsa-self-paced-thumbnail.png")' ]; const pic = document.querySelector('section'); function showImage() { var a = Math.floor(Math.random() * pics.length); var img = pics[a]; pic.style.backgroundImage = img; } setInterval(showImage, 1000);Output:  Random Image Generator My Personal Notes arrow_drop_up |
【本文地址】